<template>
  <div class="app-container">
    <el-form ref="form" :model="form" size="small" :rules="rules">
      <div>
        <div class="class-name">
          基本信息
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="员工姓名" prop="name" label-width="140px">
              <el-input v-model="form.name" placeholder="请输入员工姓名"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="证件号码" prop="cardNum" label-width="140px">
              <el-input v-model="form.cardNum"  placeholder="请输入员工姓名"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
<!--          <el-col :span="12">
            <el-form-item label="联系电话" prop="mobilePhone" label-width="140px">
              <el-input v-model="form.mobilePhone" placeholder="请输入联系电话"/>
            </el-form-item>
          </el-col>-->


          <el-col :span="12">
            <el-form-item label="性别" prop="sex" label-width="140px">
              <el-select v-model="form.sex" placeholder="请选择性别" clearable filterable>
                <el-option
                  v-for="item in sexs"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">

            <el-form-item label="民族" prop="nation" label-width="140px">
              <el-input v-model="form.nation" placeholder="请输入民族"/>
            </el-form-item>
          </el-col>

        </el-row>


        <el-row>



          <el-col :span="12">
            <el-form-item label="学历" prop="education" label-width="140px">
              <el-select v-model="form.education" placeholder="请选择学历" clearable filterable>
                <el-option
                  v-for="item in education"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="户籍类型" prop="domicileType" label-width="140px">
              <el-select v-model="form.domicileType" placeholder="请选择户籍类型" clearable filterable>
                <el-option
                  v-for="item in domicileType"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>

        </el-row>


        <el-row>


          <el-col :span="12">
            <el-form-item label="户籍地址" prop="domicileAddress" label-width="140px">
              <el-input v-model="form.domicileAddress" placeholder="请输入户籍地址"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="出生日期" prop="birthday" label-width="140px">
              <el-date-picker
                v-model="form.birthday"
                type="date"
                :clearable="false"
                placeholder="请选择出生日期"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>


          <el-col :span="12">
            <el-form-item label="婚育状态" prop="marital" label-width="140px">
              <el-select v-model="form.marital" placeholder="请选择婚育状态" clearable filterable>
                <el-option
                  v-for="item in maritalStatus"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身高" prop="height" label-width="140px">
              <el-input v-model="form.height" placeholder="请输入户籍地址"/>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row>
          <el-col :span="12">
            <el-form-item label="外语语种" prop="edu" label-width="140px">
              <el-input v-model="form.edu" placeholder="请输入外语语种"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="意向行业" prop="industry" label-width="140px">
              <el-input v-model="form.industry" placeholder="请输入意向行业"/>
            </el-form-item>
          </el-col>


        </el-row>


        <el-row>
          <!-- <el-col :span="12">
            <el-form-item label="意向岗位" prop="job" label-width="140px">
              <el-input v-model="form.job" placeholder="请输入意向岗位"/>
            </el-form-item>
          </el-col> -->

          <el-col :span="12">
            <el-form-item label="退休年龄" prop="retireAge" label-width="140px">
              <el-input v-model="form.retireAge" placeholder="请输入退休年龄"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退休状态" prop="retireStatus" label-width="140px">
              <el-select v-model="form.retireStatus" placeholder="请选择退休状态" clearable filterable>
                <el-option
                  v-for="item in retireStatus"
                  :key="item.dictValue"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="福利增员日期" prop="welfareAddDate" label-width="140px">
              <el-date-picker
                v-model="form.welfareAddDate"
                type="date"
                :clearable="false"
                placeholder="请选择福利增员日期"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="福利减员日期" prop="welfareRemoveDate" label-width="140px">
              <el-date-picker
                v-model="form.welfareRemoveDate"
                type="date"
                :clearable="false"
                placeholder="请选择福利减员日期"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="技能特长" prop="specialty" label-width="140px">
              <el-input v-model="form.specialty" placeholder="请输入技能特长" type="textarea" :rows="2"/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!--联系方式-->
      <div>
        <div class="class-name">
          联系方式
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="mobilePhone" label-width="140px">
              <el-input v-model="form.mobilePhone" placeholder="请输入联系电话"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="紧急联系人" prop="urgencyMan" label-width="140px">
              <el-input v-model="form.urgencyMan"  placeholder="请输入紧急联系人"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="紧急联系电话" prop="urgencyPhone" label-width="140px">
              <el-input v-model="form.urgencyPhone" placeholder="请输入紧急联系电话"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="邮箱" prop="email" label-width="140px">
              <el-input v-model="form.email" placeholder="请输入邮箱"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="QQ号" prop="qq" label-width="140px">
              <el-input v-model="form.qq" placeholder="请输入QQ号"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="微信号" prop="wechat" label-width="140px">
              <el-input v-model="form.wechat" placeholder="请输入微信号"/>
            </el-form-item>
          </el-col>
        </el-row>

      </div>

      <!--账号信息-->
      <div style="margin-top:20px">
        <div class="class-name">
          账号信息
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="银行账号" prop="bankNum" label-width="140px">
              <el-input v-model="form.bankNum" placeholder="请输入银行账号"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="开户银行" prop="bank" label-width="140px">
              <el-input v-model="form.bank"  placeholder="请输入开户银行"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="银行账号开户地" prop="bankAddress" label-width="140px">
              <el-input v-model="form.bankAddress" placeholder="请输入银行账号开户地"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="社保账号" prop="socialSecurityNum" label-width="140px">
              <el-input v-model="form.socialSecurityNum"  placeholder="请输入社保账号"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="公积金账号" prop="fundNum" label-width="140px">
              <el-input v-model="form.fundNum" placeholder="请输入公积金账号"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他保险名称" prop="otherInsuranceName" label-width="140px">
              <el-input v-model="form.otherInsuranceName" placeholder="请输入其他保险名称"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="其他保险账号" prop="otherInsuranceCode" label-width="140px">
              <el-input v-model="form.otherInsuranceCode" placeholder="请输入其他保险账号"/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>




      <!--亲属关系-->
      <div style="margin-top:20px">
        <div class="class-name">
          亲属关系
        </div>
        <div>
          <el-form
            :model="kinshipForm"
            ref="kinshipForm"
            :rules="kinshipForm.rules"
            :inline="true"
          >
            <el-table :data="kinshipForm.params"  border>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;" >关系</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.relation'"
                    :rules="kinshipForm.rules.relation"
                  >
                    <el-input
                      style="width: 300px;"
                      type="text"
                      placeholder="请输入关系"
                      v-model="scope.row.relation"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">亲属姓名</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.name'"
                    :rules="kinshipForm.rules.name"
                  >
                    <el-input
                      style="width: 300px;"
                      placeholder="请输入亲属姓名"
                      v-model="scope.row.name"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">工作单位</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.company'"
                    :rules="kinshipForm.rules.company"
                  >
                    <el-input
                      style="width: 300px;"
                      placeholder="请输入工作单位"
                      v-model="scope.row.company"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">担任职务</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.job'"
                    :rules="kinshipForm.rules.job"
                  >
                    <el-input
                      style="width: 300px;"
                      placeholder="请输入担任职务"
                      v-model="scope.row.job"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">联系方式</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.phone'"
                    :rules="kinshipForm.rules.phone"
                  >
                    <el-input
                      style="width: 300px;"
                      placeholder="请输入联系方式"
                      v-model="scope.row.phone"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" width="80%">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">操作</span>
                </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-plus"
                    @click="addKinShip(scope.row)"
                  >添加</el-button>
                  <el-button
                    v-if="scope.$index !== 0"
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="delKinShip(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>

        </div>
      </div>


      <!--教育经历-->
      <div style="margin-top:20px">
        <div class="class-name">
          教育经历
        </div>
        <div>
          <!--          <el-button type="primary" @click="addKinShip" plain style="float:right;margin-right: 100px;margin-bottom:5px" icon="el-icon-plus">新增</el-button>-->

          <el-form
            :model="eduForm"
            ref="eduForm"
            :rules="eduForm.rules"
            :inline="true"
          >
            <el-table :data="eduForm.params"  border>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;" >毕业时间</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.graduationDate'"
                    :rules="eduForm.rules.graduationDate"
                  >
                    <el-date-picker
                      style="width: 350px;"
                      v-model="scope.row.graduationDate"
                      type="date"
                      :clearable="false"
                      placeholder="请选择毕业时间"
                      value-format="yyyy-MM-dd"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">教育层次</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.eduType'"
                    :rules="kinshipForm.rules.eduType"
                  >
                    <el-select v-model="scope.row.eduType" placeholder="请选择教育层次" clearable filterable    style="width: 350px;">
                      <el-option
                        v-for="dict in education"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">毕业院校</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.school'"
                    :rules="kinshipForm.rules.school"
                  >
                    <el-input
                      style="width: 350px;"
                      v-model="scope.row.school"
                      placeholder="请输入毕业院校"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">专业</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.major'"
                    :rules="kinshipForm.rules.major"
                  >
                    <el-input
                      style="width: 350px;"
                      placeholder="请输入专业"
                      v-model="scope.row.major"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" width="80%">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">操作</span>
                </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-plus"
                    @click="addEdu(scope.row)"
                  >添加</el-button>
                  <el-button
                    v-if="scope.$index !== 0"
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="delEdu(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>

        </div>
      </div>

      <!--工作经历-->
      <div style="margin-top:20px">
        <div class="class-name">
          工作经历
        </div>
        <div>
          <!--          <el-button type="primary" @click="addKinShip" plain style="float:right;margin-right: 100px;margin-bottom:5px" icon="el-icon-plus">新增</el-button>-->

          <el-form
            :model="workForm"
            ref="eduForm"
            :rules="workForm.rules"
            :inline="true"
          >
            <el-table :data="workForm.params"  border>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;" >入职时间</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.joinDate'"
                    :rules="workForm.rules.joinDate"
                  >
                    <el-date-picker
                      style="width: 350px;"
                      v-model="scope.row.joinDate"
                      type="date"
                      :clearable="false"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择入职时间"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">离职时间</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.leaveDate'"
                    :rules="workForm.rules.leaveDate"
                  >
                    <el-date-picker
                      style="width: 350px;"
                      v-model="scope.row.leaveDate"
                      type="date"
                      :clearable="false"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择离职时间"
                    />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">所在单位</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.company'"
                    :rules="workForm.rules.company"
                  >
                    <el-input
                      style="width: 350px;"
                      v-model="scope.row.company"
                      placeholder="请输入所在单位"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">职位</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item
                    :prop="'params.' + scope.$index + '.job'"
                    :rules="workForm.rules.job"
                  >
                    <el-input
                      style="width: 350px;"
                      v-model="scope.row.job"
                      placeholder="请输入职位"
                    ></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="center" width="80%">
                <template slot="header" slot-scope="scope">
                  <span style="color:#2d65dc;">操作</span>
                </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-plus"
                    @click="addWork(scope.row)"
                  >添加</el-button>
                  <el-button
                    v-if="scope.$index !== 0"
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="delWork(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form>

        </div>
      </div>



      <el-form-item style="text-align:center;margin-top: 50px;">
        <el-button size="medium" type="primary" @click="submit">提 交</el-button>
        <el-button size="medium" type="info" @click="goBack">取 消</el-button>
      </el-form-item>


    </el-form>
  </div>
</template>

<script>
import { getDictData } from '@/api/dict';
import { addPeople, getPeople, updatePeople } from "@/api/people";
export default {
  name: "Detail",
  data() {
    return {
      sexs:[],
      education:[],
      domicileType:[],
      maritalStatus:[],
      retireStatus:[],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        name: [
          { required: true, message: "姓名不能为空", trigger: "blur" }
        ],
        cardNum: [
          { required: true, message: "证件号码不能为空", trigger: "blur" }
        ],
        mobilePhone: [
          { required: true, message: "请输入正确的手机号码", trigger: "blur",pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, }
        ],
      },
      data:[
        {
          id:"1",
          name:"张三"
        },
        {
          id:"2",
          name:"李四"
        }
      ],
      // 亲属关系
      kinshipForm: {
        params: [
          {}
        ],
        rules: {}
      },

      // 教育经历
      eduForm: {
        params: [ {}],
        rules: {}
      },

      // 工作经历
      workForm: {
        params: [ {}],
        rules: {}
      },






    };
  },
  created() {
    this.getSex();
    this.getEducation();
    this.getDomicileType();
    this.getMaritalStatus();
    this.getRetireStatus();
    if(this.$route.query.id){
      getPeople(this.$route.query.id).then(response => {
        this.form = response.data;
        if(this.form.kinshipList){
          this.kinshipForm.params = this.form.kinshipList;
        }
        if(this.form.eduList){
          this.eduForm.params = this.form.eduList;
        }
        if(this.form.workList){
          this.workForm.params = this.form.workList;
        }
      })
    }
  },
  methods: {
    getSex(){
      getDictData({'dictType':'sys_user_sex'}).then(response => {
        this.sexs = response.data
      })
    },
    getEducation(){
      getDictData({'dictType':'education'}).then(response => {
        this.education = response.data
      })
    },
    getDomicileType(){
      getDictData({'dictType':'domicile_type'}).then(response => {
        this.domicileType = response.data
      })
    },
    getMaritalStatus(){
      getDictData({'dictType':'marital_status'}).then(response => {
        this.maritalStatus = response.data
      })
    },
    getRetireStatus(){
      getDictData({'dictType':'retire_status'}).then(response => {
        this.retireStatus = response.data
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getPeople(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改人员";
      });
    },
    // 提交按钮
    submit(){
      this.$refs["form"].validate(valid => {
        if(valid){
          //处理 亲属关系
          let kinshipList = [];
          if(this.kinshipForm.params.length>0){
            for(const item of this.kinshipForm.params){
              if(item.relation || item.name ||  item.company || item.job || item.phone){
                kinshipList.push(item);
              }
            }
            this.form.kinshipList = kinshipList;
          }

          //处理 教育经历
          let eduList = [];
          if(this.eduForm.params.length>0){
            for(const item of this.eduForm.params){
              if(item.eduType || item.school ||  item.major || item.graduationDate){
                eduList.push(item);
              }
            }
            this.form.eduList = eduList;
          }

          //处理 工作经历
          let workList = [];
          if(this.workForm.params.length>0){
            for(const item of this.workForm.params){
              if(item.joinDate || item.leaveDate ||  item.company || item.job){
                workList.push(item);
              }
            }
            this.form.workList = workList;
          }
          if(this.form.id!=null){
            updatePeople(this.form).then(response=>{
              if(response.code==200){
                this.$message({message: '修改成功',type:'success'});
                // this.$store.dispatch("tagsView/delView", this.$route);
                this.$router.go(-1);
              }else{
                this.$message({message: '修改失败',type: 'error'});
              }
            })
          }else{
            addPeople(this.form).then(response=>{
              if(response.code==200){
                this.$message({message: '新增成功',type: 'success'});
                // this.$store.dispatch("tagsView/delView", this.$route);
                this.$router.go(-1);
              }else{
                this.$message({message: '新增失败',type: 'error'});
              }
            })
          }
        }
      })
    },
    goBack() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.go(-1);
    },

    addKinShip(row) {
      this.kinshipForm.params.push({});
    },
    delKinShip(row) {
      this.kinshipForm.params.splice(this.kinshipForm.params.indexOf(row), 1);
    },
    addEdu(row) {
      this.eduForm.params.push({});
    },
    delEdu(row) {
      this.eduForm.params.splice(this.eduForm.params.indexOf(row), 1);
    },
    addWork(row) {
      this.workForm.params.push({});
    },
    delWork(row) {
      this.workForm.params.splice(this.workForm.params.indexOf(row), 1);
    },




  }
};
</script>
<style scoped>
.infoForm {
  width: 70%;
  max-width: 800px;
  margin: 0 auto;
}

.edit-input {
  padding-right: 100px;
}

.el-select, .el-input, .el-date-editor, .el-cascader {
  width: 500px;
}

::v-deep .el-textarea__inner{
  width: 500px;
}


.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}

.el-input__inner {
  width: 100%;
}

.title {
  line-height: 40px;
  margin-left: 38px;
  margin-bottom: 10px;
  font-size: 16px;
  color: #222;
}

.title i {
  font-size: 14px;
  padding-left: 5px;
  background: #f80;
  margin-right: 10px
}
.class-name{
  margin-left: 70px;
  margin-bottom: 20px;
  font-size: 16px;
  color: #1890ff;
}
</style>
